<template>
  <div class="continua">
    <div class="content">
      <!--       1. 与普通标签结合使用：-->
      <!--       在标签中作用ref属性，其值为ref对象。当组件挂载完成后得到的value值为真实DOM元素。-->
      <el-button type="primary" @click="onBtnClickOne">获取真实元素</el-button>
      <div ref="divRef">元素内容</div>
      <hr>
      <!-- 2- 与v-for结合使用:获取到的是一个数组,数组内的元素是真实DOM -->
      <el-button type="primary" @click="onBtnClickOne">和v-for使用</el-button>
      <div ref="forRef" v-for="item in 5">和v-for使用</div>
      <hr>
      <!-- 3- 与组件结合使用:操作与子组件实现通信 -->
      <el-button type="primary" @click="onBtnClickThree">子组件</el-button>
      <el-button type="primary" @click="onBtnClickTwo">父组件调用子组件方法</el-button>
      <Children ref="childRef"></Children>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import Children from "@/components/01Ref/children.vue";

const divRef = ref()
const forRef = ref()
const childRef = ref()
const onBtnClickOne = () => {
  console.log('父调子', divRef.value.innerText)
}
const onBtnClickTwo = () => {
  childRef.value.onChildClick(4)
}
const onBtnClickThree = () => {
  console.log('childRef', childRef.value.childrenData)
}
onMounted(() => {
  console.log('forRef', forRef.value)
})
</script>

<style scoped lang="less">
.continua {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
  }
}
</style>
